<template>
  <div class="overlay" v-if="visible">
    <div class="head">
      <span>{{ data.name }}</span>
      <svg-icon name="close" @click="close"></svg-icon>
    </div>
    <div class="view">
      <div class="view-area">
        <div>
          设备类型：<span>{{ data.typeName }}</span>
        </div>
        <div>
          电压等级：<span>{{ data.voltageLevel }}</span>
        </div>
        <div>
          设备状态：<span>{{ data.status }}</span>
        </div>
        <div>
          运行编号：<span>{{ data.runNum }}</span>
        </div>
      </div>

      <div class="sublabel">摄像机巡视点位</div>
      <div class="max-h-[11.125rem] overflow-y-auto">
        <a-table
          :dataSource="data.patrolPointCameraList"
          :pagination="false"
          :columns="columnsCamera"
          :loading="loading"
          :customRow="(record: any) => {
              return {
                onClick:()=> handleClickCameraRow(record)
              }
            }
          "
          rowClassName="cursor-pointer"
        >
          <template #bodyCell="{ column, index }">
            <template v-if="column.dataIndex === 'order'">
              {{ index + 1 }}
            </template>
          </template>
        </a-table>
      </div>

      <div
        class="mt-[0.5rem] flex justify-between"
        v-if="data.patrolPointCameraList.length > 0"
      >
        <div class="w-[49%] max-h-[8rem] overflow-hidden">
          <a-spin tip="正在加载..." :spinning="cameraLoading">
            <!-- <img
              v-if="cameraUrl"
              :src="cameraUrl"
              class="object-cover cursor-pointer"
            /> -->
            <a-image v-if="cameraUrl" :src="cameraUrl" />
            <div v-else class="h-[8rem]">
              <empty description="暂无结果" />
            </div>
          </a-spin>
        </div>
        <div class="w-[49%]">
          <div v-if="!isPlay" class="play">
            <SvgIcon name="begin-outlined" @click="handlePlay" />
          </div>
          <VideoPlay :url="cameraVideoUrl" v-else />
        </div>
      </div>

      <div class="sublabel">无人机巡视点位</div>
      <div class="max-h-[11.125rem] overflow-y-auto">
        <a-table
          :dataSource="data.patrolPointUavList"
          :pagination="false"
          :columns="columnsUav"
          :loading="loading"
          :customRow="(record: any) => {
              return {
                onClick:()=> handleClickUavRow(record)
              }
            }
          "
          rowClassName="cursor-pointer"
        >
          <template #bodyCell="{ column, index }">
            <template v-if="column.dataIndex === 'order'">
              {{ index + 1 }}
            </template>
          </template>
        </a-table>
      </div>

      <div class="uav-def">
        <div>
          <a-spin tip="正在加载..." :spinning="uavDeFmLoading">
            <a-image v-if="uavDeFmUrl" :src="uavDeFmUrl" />
            <div v-else></div>
          </a-spin>
        </div>
        <div>
          <a-spin tip="正在加载..." :spinning="uavDeUnLoading">
            <a-image v-if="uavDeUnUrl" :src="uavDeUnUrl" />
            <div v-else></div>
          </a-spin>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { deviceDeInfo, uavDeInfo, moveCameraPoint } from './serve.api'
// @ts-ignore
import { unpick, frame } from '@/utils/grap'
import VideoPlay from './VideoPlay.vue'

const visible = ref(false)
const isPlay = ref(false)

const cameraLoading = ref(false)
const cameraUrl = ref('')
const cameraVideoUrl = ref('')
const cameraCurrent = ref()

const uavDeFmLoading = ref(false)
const uavDeFmUrl = ref('')
const uavDeUnLoading = ref(false)
const uavDeUnUrl = ref('')
const uavCurrent = ref()

const data = ref({
  name: '',
  typeName: '',
  voltageLevel: '',
  status: '',
  runNum: '',
  patrolPointCameraList: [],
  patrolPointUavList: []
})

const loading = ref<boolean>(false)
const columnsCamera = ref([
  {
    title: '序号',
    dataIndex: 'order',
    width: '7.5rem'
  },
  {
    title: '巡视点名称',
    dataIndex: 'pointName',
    key: 'pointName',
    width: '7.5rem',
    ellipsis: true
  },
  {
    title: '算法类别',
    dataIndex: 'algName',
    key: 'algName',
    width: '7.5rem',
    ellipsis: true
  },
  {
    title: '识别结果',
    dataIndex: 'algResult',
    key: 'algResult',
    width: '7.5rem',
    ellipsis: true
  }
])

const columnsUav = ref([
  {
    title: '序号',
    dataIndex: 'order',
    width: '7.5rem'
  },
  {
    title: '巡视点名称',
    dataIndex: 'pointName',
    key: 'pointName',
    width: '7.5rem',
    ellipsis: true
  },
  {
    title: '算法类别',
    dataIndex: 'algName',
    key: 'algName',
    width: '7.5rem',
    ellipsis: true
  },
  {
    title: '识别结果',
    dataIndex: 'algResult',
    key: 'algResult',
    width: '7.5rem',
    ellipsis: true
  }
])

const close = () => {
  visible.value = false
}

function handlePlay() {
  console.log('播放视频', cameraCurrent.value)
  isPlay.value = !isPlay.value
  cameraVideoUrl.value = cameraCurrent.value?.videoUrl ?? ''
}

// 加载摄像机缺陷资源
function loadCameraDefect(row: any) {
  cameraCurrent.value = row

  if (row.imagePath && row.bbox) {
    cameraLoading.value = true

    frame(row.imagePath, row.bbox).then((y: string) => {
      cameraUrl.value = y
      cameraLoading.value = false
    })
  } else {
    cameraUrl.value = ''
  }
}

// 加载无人机缺陷资源
function loadUavDefect(row: any) {
  uavCurrent.value = row

  uavDeInfo({ id: row.defectId }).then((res) => {
    console.log(res, '加载无人机缺陷详情', res?.uavSeqResult)
    if (res) {
      uavDeFmUrl.value = uavDeUnUrl.value = ''
      uavDeFmLoading.value = uavDeUnLoading.value = true

      frame(res?.imagePath, res?.bbox).then((i: string) => {
        uavDeFmUrl.value = i
        uavDeFmLoading.value = false
      })

      if (res?.uavSeqResult) {
        const { imagePath, maskImagePath, resultDetailList } = res?.uavSeqResult
        unpick(imagePath, maskImagePath, resultDetailList).then((x: string) => {
          frame(x, resultDetailList).then((y: string) => {
            uavDeUnUrl.value = y
            uavDeUnLoading.value = false
          })
        })
      } else {
        uavDeUnLoading.value = false
      }
    }
  })
}

function handleClickCameraRow(record: any) {
  console.log('点击【摄像机】行', record)
  loadCameraDefect(record)
  if (record.positionNum) {
    moveCameraPoint({
      id: record.cameraId,
      positionNum: record.positionNum
    })
  }
}

async function handleClickUavRow(record: any) {
  console.log('点击【无人机】行', record)
  loadUavDefect(record)
}

const showModal = (value: any) => {
  if (value) {
    console.log(value, '弹窗显示，设备信息')
    deviceDeInfo({
      // id: '32dfe898a68a0a7de474c7bd65017532dbf57f2196'
      id: value
    }).then((res) => {
      console.log(res, '设备详情===================')
      data.value = res

      visible.value = true
      isPlay.value = false

      uavDeFmUrl.value = uavDeUnUrl.value = cameraUrl.value = ''

      if (res.patrolPointCameraList.length > 0) {
        const defCamera = res.patrolPointCameraList[0]
        loadCameraDefect(defCamera)
      }

      if (res.patrolPointUavList.length > 0) {
        const defUav = res.patrolPointUavList[0]
        loadUavDefect(defUav)
      }
    })
  }
}

defineExpose({ showModal, close })
</script>

<style lang="less" scoped>
.overlay {
  position: fixed;
  top: 4rem;
  right: 1.25rem;
  z-index: 1;
  display: flex;
  overflow: hidden overlay;
  width: 32.5rem;
  max-height: 48rem;
  background-color: #fff;
  border-radius: 0.5rem;
  flex-direction: column;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 2.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 1px solid #e5e6eb;

    span {
      font-weight: 800;
    }

    .svg-icon {
      cursor: pointer;
    }
  }

  .sublabel {
    margin: 1rem 0 0.5rem;
    color: #1d2129;
    font-weight: 800;
    line-height: 1;
  }

  .view {
    overflow-y: auto;
    padding: 1rem;
    flex: 1;
    -webkit-overflow-scrolling: touch;

    &-area {
      display: grid;
      padding: 1rem;
      color: #4e5969;
      background-color: #f2f3f5;
      border-radius: 0.25rem;
      grid-template-columns: repeat(2, 1fr);

      div:nth-last-of-type(-n + 2) {
        margin-top: 0.625rem;
      }

      span {
        color: #1d2129;
      }
    }
  }
}

:deep(.ant-image) {
  display: block;
}

.uav-def {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;

  div {
    overflow: hidden;
    max-height: 8rem;

    .ant-spin-nested-loading,
    .ant-spin-spinning {
      height: 100% !important;
    }
  }
}

:deep(.ant-table-tbody) > tr.ant-table-placeholder > td.ant-table-cell {
  height: 0;
}

.play {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  :deep(.svg-icon) {
    padding: 0.25rem;
    width: 2em;
    height: 2em;
    color: #00796a;
    border: #00796a solid 0.0625rem;
    border-radius: 50%;
  }
}
</style>
